<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#000" size="16"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">账单明细</view>
			</view>
			<view class="u-nav-slot rightBtn" slot="right">
			</view>
		</u-navbar>

		<view class="detailed-list" v-if="list.length>0">
			<view class="detailed-list-item" v-for="(item,index) in list">
				<view class="list-item-left">
					<view class="title">{{item.explainValue}}</view>
					<view class="date">{{moment(item.created).format('YYYY-MM-DD HH:mm:ss')}}</view>
				</view>
				<view class="list-item-left" v-if="item.accountType == 1">
					<view class="money">{{item.recordType == 1?'+':'-'}} {{item.transactionMoney}}</view>
					<view class="balance">余额 {{item.balanceMoney}}</view>
				</view>
				<view class="list-item-left" v-else>
					<view class="money">{{item.recordType == 1?'+':'-'}} {{item.transactionMoney}}</view>
					<view class="balance">冻结 {{item.balanceMoney}}</view>
				</view>
			</view>
			<view style="width: 100%;" v-if="list.length >= 10">
				<u-loadmore :status="status" />
			</view>
		</view>
		<view v-else class="noListBox">
			<view class="noData">
				<image class="noDataImg" src="../../static/home/noData.png" mode=""></image>
				<view class="text">暂无数据</view>
			</view>
		</view>
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {
		getuserbalancelog,
		appfundaccountList
	} from '../../api/user.js';
	import {
		throttle
	} from "@/common/util.js"
	export default {
		data() {
			return {
				list: [],
				listQuery: {
					page: 1,
					pageSize: 10,
					pages: 1,
					type: ""
				},
				status: "loadmore"
			}
		},
		onShow() {
			this.getList(this.listQuery.page, this.listQuery.pageSize);
		},
		filters: {
			setName(type) {
				// 1充值2提现3发售购买4抢购购买5转售购买6抢购退款7转售转让
				let str = "";
				if (type == 1) {
					str = "充值";
				} else if (type == 2) {
					str = "提现";
				} else if (type == 3) {
					str = "购买产品";
				} else if (type == 4) {
					str = "抢购购买";
				} else if (type == 5) {
					str = "转售购买";
				} else if (type == 6) {
					str = "抢购退款";
				} else if (type == 7) {
					str = "转售收益";
				}
				return str;
			}
		},
		methods: {
			setClas(data) {
				let clas = "";
				if (data) {
					if (data < 0) {
						clas = "price1";
					}
				}
				return clas;
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			back() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
			getList(page, pageSize) {
				console.log(page, pageSize)
				// this.$refs.min_loading.open();
				appfundaccountList({
					page,
					pageSize
				}).then(res => {
					console.log(res)
					// this.$refs.min_loading.close()
					if (page == 1) {
						this.list = []
					}
					if (page > res.data.totalPage) {
						this.status = 'nomore'
						return
					} else {
						this.status = "loadmore"
					}
					this.list = [...this.list, ...res.data.rows]
					if (res.data.rows.length > 0) {
						this.listQuery.page += 1
					}

				});
			},
			// 判断这个地址是视频还是图片
			isImage(url) {
				if (!url) {
					return
				}
				let filePath = url.toLocaleLowerCase();
				if (filePath.indexOf(".mp4") != -1) {
					return false;
				} else {
					return true;
				}
			},
			submitFn() {

			}
		},
		onReachBottom: throttle(function() {
			if (this.status === 'nomore') {
				return
			} else if (this.status != 'loading') {
				this.status = 'loading'
				this.getList(this.listQuery.page, this.listQuery.pageSize);
			}
		}, 800)
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		width: 100%;
		background-color: #fff;
	}

	.con-box {
		padding: 120upx 0upx 0;
		height: 100%;
		background-color: #fff;

		.logoBox {
			width: 100%;
			height: 100%;

			.navBox {
				height: 120upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				box-shadow: 0px 0px 1px 0px rgba(51, 51, 51, 0.5000);
			}
		}

		.rightBtn {
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.noListBox {
			text-align: center;

			.noData {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-top: 200upx;

				.noDataImg {
					width: 316upx;
					height: 126upx;
				}

				.text {
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #B0B5BC;
					line-height: 92upx;
				}
			}
		}

		.detailed-list {
			width: 100%;

			.detailed-list-item {
				width: 100%;
				box-shadow: 1px 0px 1px 0px rgba(51, 51, 51, 0.1);
				padding: 40upx 30upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;

				.date {
					margin-top: 20upx;
					font-size: 24upx;
					color: 666;
				}

				.money {
					text-align: right;
					font-weight: bold;
				}

				.balance {
					margin-top: 20upx;
					font-size: 24upx;
					text-align: right;
					color: 666;
				}
			}
		}
	}
</style>
